<!-- 网站首页 -->
<template>
  <div class="home-page">

<!-- 习国故里 -->
    <img style="margin: 60px 0 40px; width: 80%; height: 94px" :src="require('_as/gaishu-titile.png')" alt="">
    <tab :tabs="tabs" :homeImg="homeImg" :homeImgBg="homeImgBg" @tabClick="tabClick">
      <keep-alive>
        <img-zoom :imgZoomData="imgZoomData[serialNum]" @toImgZoomDetails="toImgZoomDetails"></img-zoom>
      </keep-alive>
    </tab>

<!-- 畅游习国 -->
    <sightseeing-tab @sightseeingTabClick="sightseeingTabClick">
      <keep-alive>
        <sightseeing-img-zoom :sightseeingTabData="sightseeingTabData" @clickSightseeing="clickSightseeing"></sightseeing-img-zoom>
      </keep-alive>
    </sightseeing-tab>

<!-- 资讯服务 -->
    <div class="information-service">
      <img class="information-img" :src="require('_as/service-title.png')" alt="">
      <keep-alive>
        <information-img-zoom
          :btnMoreImgBg="serviceMoreBg"
          :btnMoreImgBg1="serviceMoreBg1"
          :informationData="informationData"
          :marginBottomAll="10"
          @clickinformation="clickinformation">
        </information-img-zoom>
      </keep-alive>
    </div>

<!-- 游客论坛 -->
    <div class="sightseeing-tour-history">
      <img style="width: 80%; height:94px" :src="require('_as/title-10.png')" alt="">
      <div class="sightseeing-con">
        <alone-img-zoom :aloneWidth="520" :aloneHeight="260" :imgZoomData="forumListData[0]" @clickSight="clickSight"></alone-img-zoom>
        <div class="sightseeing-con-right">
          <alone-img-zoom :aloneWidth="300" :aloneHeight="120" :imgZoomData="forumListData[1]" @clickSight="clickSight"></alone-img-zoom>
          <alone-img-zoom :aloneWidth="300" :aloneHeight="120" :imgZoomData="forumListData[2]" @clickSight="clickSight"></alone-img-zoom>
          <alone-img-zoom :aloneWidth="610" :aloneHeight="130" :imgZoomData="forumListData[3]" @clickSight="clickSight"></alone-img-zoom>
        </div>
      </div>
    </div>

  </div>
</template>

<script>
import SightseeingTab from '_c/sightseeingTab/sightseeing_tab'
import Tab from '_c/tab/tab'

import ImgZoom from '_c/imgZoom/img_zoom'

import SightseeingImgZoom from '_c/sightseeingImgZoom/sightseeing_img_zoom'
import InformationImgZoom from '_c/informationImgZoom/information_img_zoom'

import homeImg from '_as/homeImg.png'
import homeImgBg from '_as/homeImg_bg.png'

import serviceMoreBg from '_as/service-more.png'
import serviceMoreBg1 from '_as/service-more-bg.png'

// json数据
import imgZoomData from './imgZoomData.json'
import informationData from './informationData.json'
import forumListData from './forumListData.json'

import AloneImgZoom from '_c/aloneImgZoom/alone_img_zoom'

export default {
  data () {
    return {
      homeImg,
      homeImgBg,
      serialNum: 0,
      currentContent: 'ImgZoom',
      sightseeingSeriaNum: 0,
      serviceMoreBg,
      serviceMoreBg1,
      imgZoomData,
      tabs: [
        {
          tabIndex: '0',
          tabTitle: '习水旅游概况'
          // component: 'ImgZoom'
        },
        {
          tabIndex: '1',
          tabTitle: '习水地形'
        },
        {
          tabIndex: '2',
          tabTitle: '习水气候'
        },
        {
          tabIndex: '3',
          tabTitle: '人文历史'
        },
        {
          tabIndex: '4',
          tabTitle: '民风民俗'
        }
      ],
      sightseeingTabData: [],
      informationData,
      forumListData
    }
  },
  components: {
    Tab,
    ImgZoom,
    SightseeingTab,
    SightseeingImgZoom,
    InformationImgZoom,
    AloneImgZoom
  },
  watch: {
    sightseeingSeriaNum () {
      this.getDataInit()
    }
  },
  computed: {},
  created () {
    this.getEatData()
  },
  mounted () {},
  methods: {
    tabClick (item) {
      this.serialNum = parseInt(item.tabIndex)
      this.currentContent = item.component
    },
    sightseeingTabClick (item) {
      this.sightseeingSeriaNum = item.tabIndex
    },
    clickSightseeing (item) {
      switch (this.sightseeingSeriaNum) {
        case 0:
          this.$router.push({
            path: `/sightseeing_tour_details`,
            query: {
              id: item.id,
              title: item.title,
              type: 1
            }
          })
          break
        case 1:
          this.$router.push({
            name: 'hotelDetail',
            params: {
              id: item.id,
              title: item.title
            }
          })
          break
        case 2:
          this.$router.push({
            path: `/sightseeing_tour_details`,
            query: {
              id: item.id,
              title: item.title,
              type: 7,
              contentId: item.contentId,
              intro: item.intro
            }
          })
          break
        case 3:
          this.$router.push({
            path: `/sightseeing_tour_details`,
            query: {
              id: item.id,
              title: item.title,
              type: 4,
              contentId: item.contentId
            }
          })
          break
        case 4:
          this.$router.push({
            path: `/sightseeing_tour_details`,
            query: {
              id: item.id,
              title: item.title,
              type: 3,
              contentId: item.contentId
            }
          })
          break
        case 5:
          this.$router.push({
            path: `/sightseeing_tour_details`,
            query: {
              id: item.id,
              title: item.title,
              type: 5,
              contentId: item.contentId
            }
          })
          break
        default:
          break
      }
    },
    clickinformation (item) {
      switch (item.id) {
        case 0:
          this.$router.push({
            path: '/consultation_secondary/3-1',
            query: {
              title: '票务政策'
            }
          })
          break
        case 1:
          this.$router.push({
            path: '/consultation_secondary/3-2',
            query: {
              title: '客服中心'
            }
          })
          break
        case 2:
          this.$router.push({
            path: '/consultation_secondary/3-3',
            query: {
              title: '温馨提示'
            }
          })
          break
        case 3:
          this.$router.push({
            path: '/consultation_secondary/3-4',
            query: {
              title: '常用电话'
            }
          })
          break
      }
    },
    toImgZoomDetails (imgZoomData) {
      switch (imgZoomData.id) {
        case '1':
          this.$router.push('/horizontal_tab/1-1')
          break
        case '2':
          this.$router.push('/horizontal_tab/1-2')
          break
        case '3':
          this.$router.push('/horizontal_tab/1-3')
          break
        case '4':
          this.$router.push('/horizontal_tab/1-4')
          break
        case '5':
          this.$router.push('/horizontal_tab/1-5')
          break
        case '6':
          this.$router.push('/horizontal_tab/1-6')
          break
        default:
          break
      }
    },
    // 畅游习国数据获取初始化-----------------------------------------------
    getDataInit () {
      switch (this.sightseeingSeriaNum) {
        case 0:
          this.getEatData()
          break
        case 1:
          this.getHotelsData()
          break
        case 2:
          this.getTravel()
          break
        case 3:
          this.getScenicData()
          break
        case 4:
          this.getShoppingData()
          break
        case 5:
          this.getAmusementData()
          break
        default:
          break
      }
    },
    // “畅游习国-吃”数据获取
    getEatData () {
      this.sightseeingTabData = []
      this.$http.get('/v2/food', {
        pageSize: 4
      }).then(res => {
        const empt = []
        res.data.forEach(item => {
          empt.push({
            'id': item.id,
            'sightseeingImgZoom': item.dishesImages,
            'title': item.dishesName,
            'sightseeingBgImg': ''
          })
        })
        this.sightseeingTabData = empt
      })
    },
    // “畅游习国-住”数据获取
    getHotelsData () {
      this.sightseeingTabData = []
      this.$http.get('/v1/hotels', {
        pageSize: 4
      }).then(res => {
        const empt = []
        res.data.forEach(item => {
          empt.push({
            'id': item.id,
            'sightseeingImgZoom': item.thumbnailId,
            'title': item.name,
            'sightseeingBgImg': ''
          })
        })
        this.sightseeingTabData = empt
      })
    },
    // “畅游习国-行”数据获取
    getTravel () {
      this.sightseeingTabData = []
      this.$http.get('/v2/trafficRoutes', {
        pageSize: 4
      }).then(res => {
        const empt = []
        res.data.forEach(item => {
          empt.push({
            'id': item.id,
            'contentId': item.contentId,
            'intro': item.intro,
            'sightseeingImgZoom': item.thumbUrl,
            'title': item.title,
            'sightseeingBgImg': ''
          })
        })
        this.sightseeingTabData = empt
      })
    },
    // “畅游习国-游”数据获取
    getScenicData () {
      this.sightseeingTabData = []
      this.$http.get('/v1/scenic', {
        pageSize: 4
      }).then(res => {
        const empt = []
        res.data.forEach(item => {
          empt.push({
            'id': item.id,
            'sightseeingImgZoom': item.thumbUrl,
            'title': item.name,
            'contentId': item.contentId,
            'sightseeingBgImg': ''
          })
        })
        this.sightseeingTabData = empt
      })
    },
    // “畅游习国-购”数据获取
    getShoppingData () {
      this.sightseeingTabData = []
      this.$http.get('/v1/featureProduct', {
        pageSize: 4
      }).then(res => {
        const empt = []
        res.data.forEach(item => {
          empt.push({
            'id': item.id,
            'sightseeingImgZoom': item.thumbUrl,
            'title': item.name,
            'sightseeingBgImg': '',
            'contentId': item.contentId
          })
        })
        this.sightseeingTabData = empt
      })
    },
    // “畅游习国-娱”数据获取
    getAmusementData () {
      this.sightseeingTabData = []
      this.$http.get('/v2/amusementList', {
        pageSize: 4
      }).then(res => {
        const empt = []
        res.data.forEach(item => {
          empt.push({
            'id': item.id,
            'sightseeingImgZoom': item.thumb,
            'title': item.title,
            'sightseeingBgImg': '',
            'contentId': item.contentId
          })
        })
        this.sightseeingTabData = empt
      })
    },
    clickSight (item) {
      switch (item.id) {
        case 1:
          this.$router.push('/forum/4-1')
          break
        case 2:
          this.$router.push('/forum/4-1')
          break
        case 3:
          this.$router.push('/forum/4-1')
          break
        case 4:
          this.$router.push('/forum/4-1')
          break
        default:
          break
      }
    }
  }
}

</script>

<style lang='stylus' rel='stylesheet/stylus' scoped>
.home-page {}

.information-service {
  .information-img {
    padding 20px 0 10px
    width 80%
    height 94px
  }
}

.sightseeing-tour-history {
  width 100%
  position relative
  margin-bottom 10px
  img {
    margin 30px 0 20px
  }
  .sightseeing-con {
    width 100%
    display flex
    justify-content center
    .sightseeing-con-right {
      width 620px
      display flex
      flex-wrap wrap
      margin-right -30px
    }
  }
}
</style>
